<template>
  <div class="footer">
    <div class="footer-container">
      <div class="footer-logo">
        <ul>
          <li class="footer-itemlogo1"></li>
          <li class="footer-itemlogo2"></li>
          <li class="footer-itemlogo3"></li>
          <li class="footer-itemlogo4"></li>
          <li class="footer-itemlogo5"></li>
          <li class="footer-itemlogo6"></li>
          <li class="footer-itemlogo7"></li>
        </ul>
      </div>
      <div class="footerList">
        <div class="footerItem">
          <h4>服务保障</h4>
          <ul class="footerItemCon">
            <li>
              <div></div>
              正品保障
            </li>
            <li>
              <div></div>
              7天无理由放心退
            </li>
            <li>
              <div></div>
              7x15小时客户服务
            </li>
            <li>
              <div></div>
              7天无理由随心换
            </li>
          </ul>
          <div class="footerItem_h"></div>
        </div>
        <div class="footerItem">
          <h4>购物指南</h4>
          <ul class="footerItemCon">
            <li>
              <div></div>
              导购演示
            </li>
            <li>
              <div></div>
              订单操作
            </li>
            <li>
              <div></div>
              会员注册
            </li>
            <li>
              <div></div>
              账户管理
            </li>
            <li>
              <div></div>
              收获样品
            </li>
            <li>
              <div></div>
              会员等级
            </li>
          </ul>
          <div class="footerItem_h foot-h2"></div>
        </div>
        <div class="footerItem">
          <h4>支付方式</h4>
          <ul class="footerItemCon">
            <li>
              <div></div>
              23家主流网银支付
            </li>
            <li>
              <div></div>
              支付宝、银联等支付
            </li>
            <li>
              <div></div>
              信用卡支付
            </li>
            <li>
              <div></div>
              零钱支付
            </li>
          </ul>
          <div class="footerItem_h"></div>
        </div>
        <div class="footerItem">
          <h4>配送方式</h4>
          <ul class="footerItemCon">
            <li>
              <div></div>
              售后政策
            </li>
            <li>
              <div></div>
              配送范围及运费
            </li>
            <li>
              <div></div>
              验货与签收
            </li>
          </ul>
          <div class="footerItem_h foot-h4"></div>
        </div>
        <div class="footerItem">
          <h4>售后服务</h4>
          <ul class="footerItemCon">
            <li>
              <div></div>
              退货政策
            </li>
            <li>
              <div></div>
              退货流程
            </li>
            <li>
              <div></div>
              退款方式和时效
            </li>
            <li>
              <div></div>
              换货服务
            </li>
          </ul>
          <div class="footerItem_h"></div>
        </div>
        <div class="footerItem">
          <h4>帮助中心</h4>
          <img src="./images/wx_cz.jpg" />
        </div>
      </div>
      <div class="copyright">
        <ul class="helpLink">
          <li>
            关于我们
            <span class="space"></span>
          </li>
          <li>
            About us
            <span class="space"></span>
          </li>
          <li>
            Invertor Relations
            <span class="space"></span>
          </li>
          <li>
            媒体报道
            <span class="space"></span>
          </li>
          <li>
            品牌招商
            <span class="space"></span>
          </li>
          <li>
            平台规则
            <span class="space"></span>
          </li>
          <li>
            隐私条款
            <span class="space"></span>
          </li>
          <li>
            服务条款
            <span class="space"></span>
          </li>
          <li>
            唯品诚聘
            <span class="space"></span>
          </li>
          <li>
            唯品卡
            <span class="space"></span>
          </li>
          <li>
            联系我们
            <span class="space"></span>
          </li>
          <li>廉政举报</li>
        </ul>
        <p>
          Copyright © 2008-现在 vip.com，All Rights Reserved
          使用本网站即表示接受 唯品会用户协议。版权所有
          广州唯品会电子商务有限公司
        </p>
        <p>
          粤公网安备 44010302111111号 粤ICP备08114786号
          增值业务经营许可证：粤B2-20170777
          网络文化经营许可证：粤网文〔2021〕2056-282号
        </p>
        <p>
          经营主体证照
          风险监测信息互联网药品信息服务资格证书：（粤）-经营性-2018-0271
          网络食品交易第三方平台备案凭证：粤B2-20170777
          医疗器械网络交易服务第三方平台备案
        </p>
        <p>
          凭证：（粤）网械平台备字[2019]第00001号
          出版物网络交易平台服务经营备案证：粤新出网备（2021）1号
          未成年人关怀专区
        </p>
        <p>
          违法和不良信息举报电话：4006789888 算法推荐违规举报电话：4006789888
          广东省放心消费承诺单位
        </p>
        <p>京ICP备19006430号</p>
      </div>
      <div class="footerWeb">
        <ul class="webList">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer",
};
</script>

<style lang="less" scoped>
.footer {
  // background-color: #fcfcfc;
  margin-top: 100px;
  // border: 5px solid #666;

  .footer-container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;

    .footer-logo {
      margin: 0 auto;
      padding: 0px 40px;
      // height: 100px;
      overflow: hidden;

      li {
        float: left;
      }
      .footer-itemlogo1 {
        width: 80px;
        height: 80px;
        background: url("https://shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png")
          no-repeat 0px 0px;
        margin: 30px 0px 30px 100px;
      }
      .footer-itemlogo2 {
        width: 80px;
        height: 80px;
        background: url("https://shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png")
          no-repeat -100px 0px;
        margin: 30px 20px;
      }
      .footer-itemlogo3 {
        width: 80px;
        height: 80px;
        background: url("https://shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png")
          no-repeat -230px 0px;
        margin: 30px 5px 30px 20px;
      }
      .footer-itemlogo4 {
        width: 80px;
        height: 80px;
        background: url("https://shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png")
          no-repeat -350px 0px;
        margin: 30px 20px;
      }
      .footer-itemlogo5 {
        width: 80px;
        height: 80px;
        background: url("https://shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png")
          no-repeat -480px 0px;
        margin: 30px 20px;
      }
      .footer-itemlogo6 {
        width: 80px;
        height: 80px;
        background: url("https://shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png")
          no-repeat -600px 0px;
        margin: 30px 20px;
      }
      .footer-itemlogo7 {
        width: 80px;
        height: 80px;
        background: url("https://shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png")
          no-repeat -720px 0px;
        margin: 30px 20px;
      }
    }

    .footerList {
      padding: 20px;
      // border-bottom: 1px solid #e4e1e1;
      // border-top: 1px solid #e4e1e1;
      overflow: hidden;
      padding-left: 40px;

      .footerItem {
        width: 16.6666667%;
        float: left;

        .footerItem_h {
          width: 1px;
          height: 150px;
          background-color: #e0e0e0;
          margin-top: -100px;
          margin-left: 150px;
        }
        .foot-h2 {
          margin-top: -136px;
        }
        .foot-h4 {
          margin-top: -82px;
        }

        h4 {
          font-size: 12px;
          color: #4d4d4d;
        }

        .footerItemCon {
          margin-top: 5px;
          li {
            line-height: 18px;
            color: #808080;
          }
          li div {
            width: 3px;
            height: 3px;
            float: left;
            margin-top: 10px;
            margin-right: 3px;
            background-color: #666;
          }
        }

        &:last-child img {
          width: 121px;
        }
      }
    }

    .copyright {
      padding: 20px;

      .helpLink {
        text-align: center;
        height: 30px;
        // border: 1px solid #666;
        background-color: #d7237e;
        color: white;

        li {
          display: inline;
          line-height: 30px;

          .space {
            border-left: 1px solid white;
            width: 1px;
            height: 13px;
            background: white;
            margin: 8px 10px;
          }
        }
      }

      p {
        margin: 10px 0;
        text-align: center;
        color: #808080;
      }
    }
    .footerWeb {
      width: 960px;
      height: 40px;
      margin: 0 auto;
      position: absolute;
      ul {
        margin-top: 20px;
        margin-left: 43%;
        overflow: hidden;
        li {
          float: left;
          width: 99px;
          height: 40px;
          margin-right: 9px;
          background-image: url(//shop.vipstatic.com/img/common/footer-hash-3de6f1ae.png?939748fb);
          background-repeat: no-repeat;
          &:first-child {
            background-position: 0 -150px;
          }
          &:nth-child(2) {
            background-position: 0px -203px;
          }
          &:nth-child(3) {
            background-position: 0px -251px;
          }
          &:nth-child(4) {
            background-position: 0px -400px;
          }
        }
      }
    }
  }
}
</style>
